<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
import { axiosrmedical } from '@/http/axiosRead';

const router = useRouter();
const route = useRoute();

// 获取路由参数
const patientId = ref(route.query.patientId as string);
const campusId = ref(route.query.campusId as string);
const departmentId = ref(route.query.departmentId as string);
const departmentName = ref(route.query.departmentName as string);
const doctorId = ref(route.query.doctorId as string);
const doctorName = ref(route.query.doctorName as string);

// 预约表单数据
const appointmentForm = reactive({
  date: '',
  timeSlot: '',
  fee: '50.00'
});

// 可选日期（模拟数据）
const availableDates = [
  { text: '今天', value: new Date().toISOString().split('T')[0] },
  { text: '明天', value: new Date(Date.now() + 86400000).toISOString().split('T')[0] },
  { text: '后天', value: new Date(Date.now() + 86400000 * 2).toISOString().split('T')[0] }
];

// 可选时段（模拟数据）
const availableTimeSlots = [
  { text: '上午 8:00-9:00', value: '08:00-09:00' },
  { text: '上午 9:00-10:00', value: '09:00-10:00' },
  { text: '上午 10:00-11:00', value: '10:00-11:00' },
  { text: '下午 14:00-15:00', value: '14:00-15:00' },
  { text: '下午 15:00-16:00', value: '15:00-16:00' }
];

// 提交预约
const submitAppointment = () => {
  if (!appointmentForm.date || !appointmentForm.timeSlot) {
    showToast('请选择日期和时段');
    return;
  }

  // 这里应该调用真实API进行预约
  showToast('预约成功');
  setTimeout(() => {
    router.push('/home');
  }, 1500);
};

// 返回上一页
const onBack = () => {
  router.back();
};
</script>

<template>
  <div class="appointment-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="预约挂号" 
      left-arrow 
      @click-left="onBack">
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>

    <div class="scrollable-content">
      <div class="section">
        <div class="section-title">挂号信息</div>
        
        <van-cell-group inset>
          <van-cell title="就诊人ID" :value="patientId" />
          <van-cell title="科室" :value="departmentName || '未选择'" />
          <van-cell title="医生" :value="doctorName || '未选择'" />
          
          <van-field
            v-model="appointmentForm.date"
            is-link
            readonly
            name="日期"
            label="选择日期"
            placeholder="请选择日期"
            @click="() => {}"
          />
          
          <van-field
            v-model="appointmentForm.timeSlot"
            is-link
            readonly
            name="时段"
            label="选择时段"
            placeholder="请选择时段"
            @click="() => {}"
          />
          
          <van-cell title="挂号费" :value="`¥${appointmentForm.fee}`" />
        </van-cell-group>
      </div>
      
      <!-- 可选日期 -->
      <div class="section">
        <div class="section-title">选择日期</div>
        <div class="date-list">
          <div 
            v-for="date in availableDates" 
            :key="date.value"
            class="date-item"
            :class="{ active: appointmentForm.date === date.value }"
            @click="appointmentForm.date = date.value"
          >
            <div class="date-text">{{ date.text }}</div>
            <div class="date-value">{{ date.value }}</div>
          </div>
        </div>
      </div>
      
      <!-- 可选时段 -->
      <div class="section">
        <div class="section-title">选择时段</div>
        <div class="time-list">
          <div 
            v-for="time in availableTimeSlots" 
            :key="time.value"
            class="time-item"
            :class="{ active: appointmentForm.timeSlot === time.value }"
            @click="appointmentForm.timeSlot = time.value"
          >
            {{ time.text }}
          </div>
        </div>
      </div>
      
      <div class="submit-btn">
        <van-button type="primary" block round @click="submitAppointment">确认预约</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.appointment-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}

.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.date-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
}

.date-item {
  min-width: 80px;
  padding: 12px;
  border-radius: 8px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #eee;
}

.date-item.active {
  background-color: #e6f0ff;
  border-color: #4080ff;
  color: #4080ff;
}

.date-text {
  font-size: 14px;
  margin-bottom: 4px;
}

.date-value {
  font-size: 12px;
  color: #999;
}

.time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.time-item {
  width: calc(50% - 6px);
  padding: 12px;
  border-radius: 8px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 8px;
}

.time-item.active {
  background-color: #e6f0ff;
  border-color: #4080ff;
  color: #4080ff;
}

.submit-btn {
  margin: 24px 0;
}
</style> 